<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">
<f:view>
	<h:form id='brands_form'>
		<h:head>
			<style type="text/css" title="currentStyle">
				@import "${facesContext.externalContext.requestContextPath}/resources/css/datatable/datatable_table.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/datatable/TableTools.css";
				@import "${facesContext.externalContext.requestContextPath}/resources/css/datatable/TableTools_JUI.css";
				@import "${facesContext.externalContext.requestContextPath}/views/css/theme.css";
				@import "${facesContext.externalContext.requestContextPath}/views/css/global.css";
			</style>
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/resources/script/jquery.js"></script>
				
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/resources/script/datatable/jquery.dataTables.js"></script>
			<script type="text/javascript" charset="utf-8" 
				src="${facesContext.externalContext.requestContextPath}/resources/script/datatable/ZeroClipboard.js"></script>
			<script type="text/javascript" charset="utf-8" 
				src="${facesContext.externalContext.requestContextPath}/resources/script/datatable/TableTools.js"></script>
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/views/scripts/global.js"></script>
				
			<script type="text/javascript"
				src="${facesContext.externalContext.requestContextPath}/views/management/scripts/brands.js"></script>
				
			<script type="text/javascript" charset="utf-8">
			//<![CDATA[
				var asInitVals = new Array();
				var oTable;
				var aoColumnsVal='';
				for(var i=0; i < #{brandsBean.columnsSize};i++)
				{
					aoColumnsVal =aoColumnsVal+ 'null,';
				}
				aoColumnsVal += 'null';
				$(document).ready( function () {
					oTable = $('#table').dataTable( {
						"sScrollY": 400,
						"bJQueryUI": true,
						"sPaginationType": "full_numbers",
						"sDom": 'T<"clear">lfrtip',
						"oTableTools": {
							"sSwfPath": "${facesContext.externalContext.requestContextPath}/resources/swf/datatable/copy_csv_xls_pdf.swf",
							"sRowSelect": "single",
							
							"aButtons": [ "copy", 
							 	             {
								"sExtends": "collection",
								"sButtonText": "Save",
								"aButtons": [ "csv", "xls", "pdf", "print" ]
							 }
							]
						
						},
						#{brandsBean.tableData}
					} );
					
					$("tfoot input").keyup( function () {
				        /* Filter on the column (the index) of this element */
				        oTable.fnFilter( this.value, $("tfoot input").index(this) );
				    } );
				     
				    /*
				     * Support functions to provide a little bit of 'user friendlyness' to the textboxes in
				     * the footer
				     */
				    $("tfoot input").each( function (i) {
				        asInitVals[i] = this.value;
				    } );
				     
				    $("tfoot input").focus( function () {
				        if ( this.className == "search_init" )
				        {
				            this.className = "";
				            this.value = "";
				        }
				    } );
				     
				    $("tfoot input").blur( function (i) {
				        if ( this.value == "" )
				        {
				            this.className = "search_init";
				            this.value = asInitVals[$("tfoot input").index(this)];
				        }
				    } );
				    
				    thumbnailDisplay();
				    
				} );				
				
				
				//]]>
			</script>
		</h:head>
		<body>
			<div>
			<ui:include src="../../views/header/header.xhtml" />
			<br />
			<br />
			<br />
			</div>
			<div id="buttons_div">
				<h:commandButton id="create_brand_btn" value="Create Brand" action="#{brandsBean.createBrandAction}">
					<f:setPropertyActionListener target="#{editBrandBean.mode}" value="1"></f:setPropertyActionListener>
				</h:commandButton>
				<h:commandButton id="open_brand_btn" value="Open Brand" action="#{brandsBean.openBrandAction}" onclick="return openOnClick()">
					<f:setPropertyActionListener target="#{editBrandBean.name}" value="#{brandsBean.name}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{editBrandBean.description}" value="#{brandsBean.selectedBrand.description}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{editBrandBean.icon}" value="#{brandsBean.selectedBrand.icon}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{editBrandBean.enableFlag}" value="#{brandsBean.selectedBrand.enabled}"></f:setPropertyActionListener>
					<f:setPropertyActionListener target="#{editBrandBean.mode}" value="0"></f:setPropertyActionListener>
				</h:commandButton>
				<h:commandButton id="delete_brand_btn" value="Delete Brand" action="#{brandsBean.deleteBrandAction}" onclick="return deleteOnClick()">
				</h:commandButton>
				<br />
				<br />
				<br />
			</div>
			<div id="brands_hidden_div" class="hidden_input">
				<h:inputText id="selected_brand_name" value="#{brandsBean.name}"></h:inputText>
			</div>
			
			<div id="demo">
				<table id="table" class="display">
                    <thead>
						<tr>
							<ui:repeat value="#{brandsBean.columnNames}" var="columnName">
								<th><h:outputText value="#{columnName}"/></th>
							</ui:repeat>
						</tr>
					</thead>
                     <tbody>
                     </tbody>
                     <tr></tr>
                    <tfoot>
                    	<tr>
							<ui:repeat value="#{brandsBean.columnNames}" var="columnName">
								<th><input type="text"  value="Search #{columnName}" class="search_init" /></th>
							</ui:repeat>
						</tr>
					</tfoot>
				</table>
			</div>
			<ui:include src="../../views/footer/footer.xhtml" />
		</body>
	</h:form>
</f:view>
</html>
